<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <style>
    body {
      width: 300px;
      padding: 10px;
    }
    .input-group {
      margin-bottom: 10px;
    }
    input[type="text"] {
      width: 70%;
      padding: 5px;
    }
    input[type="color"] {
      width: 25%;
      padding: 0;
      height: 28px;
      vertical-align: middle;
    }
    .btn {
      width: 100%;
      padding: 8px;
      margin-bottom: 5px;
      border: none;
      cursor: pointer;
      border-radius: 4px;
    }
    #highlight {
      background-color: #4CAF50;
      color: white;
    }
    #clear {
      background-color: #f44336;
      color: white;
    }
    #keywords-list {
      margin-top: 10px;
      max-height: 150px;
      overflow-y: auto;
    }
    .keyword-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 5px;
      border-bottom: 1px solid #eee;
      transition: background-color 0.2s;
    }
    .keyword-item:hover {
      background-color: #f5f5f5;
    }
    .keyword-text {
      flex-grow: 1;
      padding: 2px 5px;
      border-radius: 3px;
    }
    .keyword-actions {
      display: flex;
      gap: 8px;
    }
    .use-keyword, .remove-keyword {
      color: red;
      cursor: pointer;
      padding: 0 5px;
      transition: transform 0.2s;
    }
    .use-keyword {
      color: #4CAF50;
    }
    .use-keyword:hover, .remove-keyword:hover {
      transform: scale(1.2);
    }
    .no-keywords {
      text-align: center;
      color: #666;
      padding: 10px;
      font-style: italic;
    }
    .nav-buttons {
      display: flex;
      gap: 5px;
      margin-bottom: 10px;
    }
    .nav-btn {
      flex: 1;
      padding: 5px;
      background-color: #2196F3;
      color: white;
      border: none;
      border-radius: 4px;
      cursor: pointer;
    }
    .match-count {
      text-align: center;
      margin: 5px 0;
      color: #666;
    }
    .auto-highlight {
      background-color: #9C27B0 !important;
      margin-bottom: 10px;
    }
    .legend {
      margin-top: 10px;
      padding: 5px;
      border-top: 1px solid #eee;
    }
    .legend-item {
      display: flex;
      align-items: center;
      margin: 3px 0;
      font-size: 12px;
    }
    .legend-color {
      width: 15px;
      height: 15px;
      margin-right: 5px;
      border-radius: 3px;
    }
  </style>
</head>
<body>
  <div class="input-group">
    <input type="text" id="keyword" placeholder="请输入要高亮的关键字">
    <input type="color" id="highlightColor" value="#ffff00">
  </div>
  <button id="highlight" class="btn">高亮关键字</button>
  <button id="autoHighlight" class="btn auto-highlight">自动标记重点句式</button>
  <div class="nav-buttons">
    <button id="prevMatch" class="nav-btn">上一个 (Shift+F3)</button>
    <button id="nextMatch" class="nav-btn">下一个 (F3)</button>
  </div>
  <div class="match-count" id="matchCount"></div>
  <button id="clear" class="btn">清除所有高亮</button>
  <div id="keywords-list"></div>
  
  <div class="legend">
    <div class="legend-item">
      <div class="legend-color" style="background-color: #FFD700"></div>
      <span>转折句式</span>
    </div>
    <div class="legend-item">
      <div class="legend-color" style="background-color: #98FB98"></div>
      <span>因果关系</span>
    </div>
    <div class="legend-item">
      <div class="legend-color" style="background-color: #87CEEB"></div>
      <span>递进强调</span>
    </div>
    <div class="legend-item">
      <div class="legend-color" style="background-color: #DDA0DD"></div>
      <span>总结归纳</span>
    </div>
    <div class="legend-item">
      <div class="legend-color" style="background-color: #FFA07A"></div>
      <span>对比句式</span>
    </div>
    <div class="legend-item">
      <div class="legend-color" style="background-color: #FF69B4"></div>
      <span>疑问和重点强调</span>
    </div>
  </div>
  <script src="popup.js"></script>
</body>
</html> 